<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>首页</span>
    </div>
    <div class="home-container">
      <el-row :gutter="0" class="top-nav">
        <el-col :md="2" :sm="4" :xs="8">
          <div>
            <span>查询视图: </span>
          </div>
        </el-col>
        <el-col :md="2" :sm="4" :xs="8">
          <div class="grid-content bg-purple">
            <span>我负责的</span>
          </div>
        </el-col>
        <el-col :md="2" :sm="4" :xs="8">
          <div class="grid-content bg-purple">
            <span>我关注的</span>
          </div>
        </el-col>
        <el-col :md="2" :sm="2" :xs="8">
          <div class="grid-content bg-purple">
            <span>公海</span>
          </div>
        </el-col>
        <el-col :md="2" :sm="4" :xs="8">
          <div class="grid-content bg-purple">
            <span>我合作的</span>
          </div>
        </el-col>
        <el-col :md="2" :sm="2" :xs="8">
          <div class="grid-content bg-purple">
            <span>催款</span>
          </div>
        </el-col>
        <el-col :md="2" :sm="4" :xs="8">
          <div class="grid-content bg-purple" @click="changeSearch">
            展开搜索
            <i :class="[isFormShow?'el-icon-arrow-down':'el-icon-arrow-up' ,'el-icon--right']"/>
          </div>
        </el-col>
      </el-row>
      <el-collapse-transition>
        <div v-show="isFormShow" class="top-form">
          <v-form :rule-form="ruleForm" :rules="rules" :form-titles="formTitles"/>
        </div>
      </el-collapse-transition>
      <div class="table-menu">
        <el-button type="primary" size="mini">添加</el-button>
        <el-button type="primary" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button>
        <el-button type="primary" size="mini">群发短信</el-button>
      </div>
      :tableTitle="tableTitle" :tableData="tableData"></v-table>
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import vTable from './table'
import vForm from './form'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { vTable, vForm, UploadExcelComponent },
  data() {
    return {
      isFormShow: false,
      formTitles: [
        {
          cn: '客户名称：',
          en: 'name'
        },
        {
          cn: '主要联系人：',
          en: 'people'
        },
        {
          cn: '联系方式：',
          en: 'phone'
        },
        {
          cn: '负责人：',
          en: 'principal'
        },
        {
          cn: '企业规模：',
          en: 'scale'
        },
        {
          cn: '最近联系时间：',
          en: 'connect_time',
          type: 'time'
        },
        {
          cn: '创建时间：',
          en: 'create_time',
          type: 'time'
        },
        {
          cn: '状态：',
          en: 'status',
          type: 'select'
        }
      ],
      form: {
        name: 111,
        status: '审核中'
      },
      ruleForm: {
        name: 111,
        status: '审核中',
        phone: 1233123123,
        people: '二狗'
      },
      rules: {
        named: [{ required: true, message: '请输入', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      tableTitle: [
        {
          cn: '编号：',
          en: 'id'
        },
        {
          cn: '关注：',
          en: 'concern'
        },
        {
          cn: '公司名称：',
          en: 'name'
        },
        {
          cn: '主要联系人：',
          en: 'people'
        },
        {
          cn: '联系方式：',
          en: 'phone'
        },
        {
          cn: '汇款人信息：',
          en: 'create_time'
        },
        {
          cn: '汇款银行：',
          en: 'principal'
        },
        {
          cn: '开发进度：',
          en: 'progress'
        }
      ],
      tableData: [
        {
          id: 1,
          concern: '关注',
          name: '杭州xx公司',
          people: '张三',
          phone: '1231232132',
          create_time: '2017-2-4',
          principal: '二狗',
          progress: '联系中'
        },
        {
          id: 2,
          concern: '关注',
          name: '杭州xx公司',
          people: '张三',
          phone: '1231232132',
          create_time: '2017-2-4',
          principal: '二狗',
          progress: '联系中'
        }
      ],

      // 导出excel
      downloadLoading: false,
      filename: '导出文件'
    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .home-container {
        .top-nav {
            padding: 15px 55px;
        }
        .top-form {
            margin-bottom: 15px;
            .line {
                text-align: center;
            }
        }
        .grid-content {
            /*font-size: 20px;*/
            cursor: pointer;
            color: #45d1e1;
            .color {
                /*font-size: 20px;*/
                color: #45d1e1;
                font-weight: 600;
            }
        }
        .table-menu {
            padding-left: 30px;
            padding-bottom: 15px;
        }
    }
</style>
